<!-- 订单列表 -->
<template>
	<!-- 滚动区域 -->
	<view class="container">
		<scroll-view class="scroll-panel" :scroll-top="scrollTop" scroll-y="true" :style="{ 'height':scrollHeight }"
			@scroll="scroll" scroll-with-animation="true">
			<view style="width: 100%;height: 100%;" v-show="orderListShow">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-orange "></text> 订单列表 <span style="font-size: 26rpx;">
							(左滑对订单进行编辑)</span>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
						v-for="(item,index) in orderListParent" :key="index" @touchstart="ListTouchStart"
						@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<view class="cu-avatar round lg"
							:style="[{backgroundImage:'url(https://doc.xcwxyy.cn/download/delivery/logo.png)'}]">
						</view>
						<view class="content">
							<view class="text-grey hidenOvewText">备注：{{item.remark}}</view>
							<view class="text-gray text-sm">
								<text :class="item.status==1?sendFlase:sendTrue"></text> {{item.status==1?'未配送':'已配送'}}
								<text style="padding-left: 60rpx;" class="margin-right-xs">下单时间：</text> <span
									v-text="item.createTime.substring(0,10)"></span>
							</view>
						</view>
						<view class="action">
							<view class="text-grey text-xs" style="font-weight: bolder;"
								v-text="item.createTime.substring(11,16)"></view>
						</view>
						<view class="move">
							<view class="bg-grey" @click="orderDetail(item)">详情</view>
							<view class="bg-red" @click="deleteOrder(item)" v-if="item.status==1">删除</view>
					</view>
						</view>
				</view>
			</view>
			<view style="width: 100%;height: 100%;" v-if="!orderListShow">
				<orderDetail @changeStatus="changeStatus" :goodList="goodList"></orderDetail>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import orderDetail from './orderDetail/orderDetail'
	export default {
		name: 'orderList',
		props: {
			orderListParent: {
				type: Array
			},
			orderShow: {
				type: Boolean
			}
		},
		components: {
			orderDetail
		},
		data() {
			return {
				// 滚动区域高度
				scrollHeight:'460px',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				// 配送状态样式
				sendTrue: 'cuIcon-infofill text-green  margin-right-xs',
				sendFlase: 'cuIcon-infofill text-red  margin-right-xs',
				// 显示订单列表界面
				orderListShow: this.$props.orderShow,
				// 商品 列表
				goodList: []
			}
		},
		mounted() {
			this.initScrollView()
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 5 ? (this.leftIndex-5):0}`;
			}
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('.scroll-panel');
					view.boundingClientRect(res => {
						this.scrollHeight = `${res.height}px`;
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},
			// 改变订单列表显示状态
			changeStatus() {
				this.orderListShow = true
			},
			// 订单详情
			orderDetail(item) {
				this.orderListShow = false
				uni.request({
					url: this.$serverApi + "/applet/orderDetail/getOrderDetail?orderId=" + item.id,
					method: "GET",
					header: {
						//返回数据类型
						"content-type": " application/json; charset=utf-8",
						//设置用户访问的token信息
						"Authorization": uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 200) {
							this.goodList = res.data.data
						} else {}
					},
					fail: res => {}
				})
			},
			// 删除订单
			deleteOrder(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除订单吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: that.$serverApi + "/applet/order/delete/" + item.id,
								method: "POST",
								header: {
									//返回数据类型
									"content-type": " application/json; charset=utf-8",
									//设置用户访问的token信息
									"Authorization": uni.getStorageSync("token")
								},
								success: res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: '删除订单成功！',
											duration: 2000
										});
										that.$emit("getOrderList")
									} else {}
								},
								fail: res => {}
							})
						} else if (res.cancel) {
							return false;
						}
					}
				});
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail
					.scrollTop //滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
			},
			// ListTouch触摸开始,减30px减少X轴灵敏度
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX-30
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}

		}
	}
</script>

<style lang="scss">
	// 文字太长显示。。。
	.hidenOvewText {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	page,
	.container {
		height: 100%;
	}

	.goodTable {
		margin-bottom: 30rpx;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.bottom-panel {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.image_wrapper {
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				padding-left: 20rpx;
				position: relative;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active,
				&:active {
					color: #42b983;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.swiper {
				height: 500px;
			}

			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 999;
			}

			.item {
				padding-bottom: 10rpx;
			}

			.this.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 10rpx;

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
					margin-left: 2px;
				}

				.describe {
					font-size: 24rpx;
					color: #999;
				}

				.money {
					font-size: 24rpx;
					color: #efba21;
				}
			}
		}
	}
</style>
